<template>
  <div class="min-h-screen bg-gray-100 pb-20">
    <!-- Header -->
    <header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-10 flex items-center justify-between px-4 py-3">
      <button @click="$router.back()" class="text-blue-600 text-lg">&lt; 返回</button>
      <h2 class="font-bold text-lg">商家信息</h2>
      <div class="w-8"></div>
    </header>

    <!-- Content -->
    <main class="pt-16 px-4">
      <!-- 商家信息 -->
      <section class="bg-white p-4 rounded-lg shadow mb-4">
        <img :src="shop.logo" alt="商家logo" class="w-full h-32 object-cover rounded mb-3 transition-opacity duration-500 ease-in-out opacity-0" @load="(e) => e.target.classList.remove('opacity-0')" />
        <h3 class="font-bold text-lg">{{ shop.name }}</h3>
        <p class="text-sm text-gray-600">￥{{ shop.minPrice }}起送 ￥{{ shop.deliveryFee }}配送</p>
        <p class="text-sm text-gray-600">{{ shop.description }}</p>
      </section>

      <!-- 商品列表 -->
      <section>
        <h3 class="text-lg font-bold mb-2">推荐商品</h3>
        <ul>
          <li v-for="(item, index) in shop.products" :key="index"
              class="flex justify-between items-center border-b border-gray-200 py-3">
            <!-- 左侧信息 -->
            <div class="flex items-center">
              <img :src="item.image" :alt="item.name" class="w-12 h-12 object-cover mr-3 rounded transition-opacity duration-500 ease-in-out opacity-0" @load="(e) => e.target.classList.remove('opacity-0')" />
              <div>
                <h4 class="font-semibold">{{ item.name }}</h4>
                <p class="text-red-500">￥{{ item.price }}</p>
              </div>
            </div>

            <!-- 右侧加减按钮 -->
            <div class="flex items-center space-x-2">
              <button @click="decrement(item)"
                      class="w-7 h-7 bg-gray-200 text-xl leading-none flex items-center justify-center rounded-full hover:bg-gray-300 transition-colors duration-200">
                -
              </button>
              <input type="number"
                     v-model.number="item.quantity"
                     min="0"
                     max="99"
                     @change="updateTotal"
                     class="w-8 text-center border border-gray-300 rounded outline-none focus:border-blue-500">
              <button @click="increment(item)"
                      class="w-7 h-7 bg-gray-200 text-xl leading-none flex items-center justify-center rounded-full hover:bg-gray-300 transition-colors duration-200">
                +
              </button>
            </div>
          </li>
        </ul>
      </section>
    </main>

    <!-- Footer -->
    <footer class="fixed bottom-0 left-0 w-full bg-white border-t border-gray-200 px-4 py-3 flex justify-between items-center z-10">
      <div class="flex items-center">
        <div class="relative mr-3">
          <i class="fa fa-shopping-cart text-xl text-gray-600"></i>
          <div v-if="cartQty > 0" class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
            {{ cartQty }}
          </div>
        </div>
        <div class="text-sm">
          <div class="font-bold text-red-500">￥{{ totalPrice.toFixed(2) }}</div>
          <div class="text-gray-500">另需配送费{{ shop.deliveryFee }}元</div>
        </div>
      </div>
      <button @click="goToCheckout"
              class="bg-blue-600 text-white text-sm px-6 py-2 rounded hover:bg-blue-700 transition-colors duration-200">
        去结算
      </button>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const shopId = parseInt(route.params.id)

// 模拟商家数据
const allShops = {
  1: {
    name: '万家饺子（软件园E18店）',
    logo: '/img/sj01.png',
    minPrice: 15,
    deliveryFee: 3,
    description: '各种饺子炒菜',
    products: [
      { name: '纯肉鲜肉水饺', price: 15, image: '/img/sp01.png', quantity: 0 },
      { name: '玉米鲜肉水饺', price: 16, image: '/img/sp02.png', quantity: 0 }
    ]
  },
  2: {
    name: '小锅饭豆腐馆（全运店）',
    logo: '/img/sj02.png',
    minPrice: 20,
    deliveryFee: 5,
    description: '地道川菜 麻辣过瘾',
    products: [
      { name: '宫保鸡丁盖饭', price: 18, image: '/img/sp03.png', quantity: 0 },
      { name: '鱼香肉丝面', price: 15, image: '/img/sp04.png', quantity: 0 }
    ]
  }
}

const shop = ref(allShops[shopId] || {
  name: '未知商家',
  products: []
})

let totalPrice = ref(0)
let cartQty = ref(0)

const updateTotal = () => {
  totalPrice.value = 0
  cartQty.value = 0
  shop.value.products.forEach(item => {
    if (item.quantity > 0) {
      totalPrice.value += item.price * item.quantity
      cartQty.value += item.quantity
    }
  })
}

const increment = (item) => {
  item.quantity++
  updateTotal()
}

const decrement = (item) => {
  if (item.quantity > 0) {
    item.quantity--
    updateTotal()
  }
}

const goToCheckout = () => {
  const selectedItems = shop.value.products.filter(item => item.quantity > 0)
  if (selectedItems.length === 0) {
    alert('请至少选择一件商品')
    return
  }

  router.push({
    path: '/order',
    query: {
      items: encodeURIComponent(JSON.stringify(selectedItems))
    }
  })
}

onMounted(() => {
  // 初始化数量为0
  shop.value.products.forEach(p => {
    if (p.quantity === undefined) p.quantity = 0
  })
  updateTotal()
})
</script>




